<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        title="产品日期明细"
        :btnList="fullInfo.btnList"
        @returnBack="returnBack"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <BasicInformation :info="infoList" />
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('detailInfo') }}</p>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <PageTable
                class="table-scroll-hidden"
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :pager="true"
                :summary="true"
                :check-box="false"
                :tabIndex="true"
                :api="getProductDateDetailsPage"
                :mergeData="tableInfo.mergeData"
                :mergeFiled="tableInfo.mergeFiled"
                v-model:query="filterInfo.query"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                :isDynamic="true"
              >
              </PageTable>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
  </div>
</template>

<script setup name="Details">
import { getProductDateDetailsPage } from '@/api/15189.js'

const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'row'])
const infoList = ref({
  data: {},
  fieldList: [
    { label: '通用名称', value: 'commonName', type: 'text' },
    { label: '编码', value: 'code', type: 'text' },
    { label: '当前状态', value: 'statusValue', type: 'text' },
  ],
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    productId: props.row.productId,
    sort: 'product_id',
  },
})

const fullInfo = ref({
  btnList: [],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  mergeData: {},
  mergeFiled: [],
  fieldList: [
    { label: '使用日期', value: 'consumeTime' },
    { label: '批号', value: 'batchNumber' },
    { label: '失效日期', value: 'validityDate' },
    { label: '接收日期', value: 'receivingTime' },
  ],
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    proxy.$emit('update:visible', val) // 更新父组件visible
  },
})
function returnBack() {
  proxy.$emit('returnBack', false)
}
function getList() {
  tableInfo.value.refresh = Math.random()
}
onMounted(() => {
  proxy.$nextTick(() => {
    infoList.value.data = props.row
    getList()
  })
})
</script>

<style scoped>
:deep(.table-scroll-hidden) > .el-table {
  overflow-y: hidden;
}
</style>
